<template>
  <div class="add">
    <MHeader :back="true">添加</MHeader>
    <div class="bookdetail">
      <ul>
        <li>
          <label for="bookName">书名</label>
          <input type="text" v-model="book.bookName" id="bookName">
        </li>
        <li>
          <label for="bookCover">封面</label>
          <input type="text" v-model="book.bookCover" id="bookInfo">
        </li>
        <li>
          <label for="bookInfo">书的信息</label>
          <input type="text" v-model="book.bookInfo" id="bookInfo">
        </li>
        <li>
          <label for="bookName">价格</label>
          <input type="text" v-model.number="book.bookPrice" id="bookPrice">
        </li>
        <li>
          <button @click="add">确认添加</button>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
import MHeader from "../base/MHeader.vue";
import { addBook } from "../api";
export default {
  data() {
    return {
      book: {}
    };
  },
  methods: {
    async add() {
      await addBook(this.book);
      this.$router.push("/list");
    }
  },
  components: {
    MHeader
  }
};
</script>
<style scoped lang="less">
.detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #fff;
  z-index: 100;
}
.bookdetail {
  margin-top: 50px;
}

li {
  padding: 0 50px;
  lable {
    display: block;
    font-size: 25px;
  }
  input {
    margin: 10px 0px;
    height: 25px;
    widows: 100%;
    display: block;
  }
  button {
    display: block;
    width: 60px;
    height: 20px;
    color: blueviolet;
    border: none;
    border-radius: 15px;
  }
}
</style>

